<template>
  <div id="register" class="animated fadeIn">
      <Card>
        <p slot="title" class="login-form">注册</p>
        <p slot="title" class="changeForm" @click="loginForm">登录
          <Icon type="ios-redo-outline" size="20"></Icon>
        </p>
        <Form ref="registerFormValidate" :model="registerFormValidate" :rules="registerRuleValidate" :label-width="80">
          <Form-item label="用户名" prop="name">
            <Input v-model="registerFormValidate.name" icon="person" placeholder="请输入用户名"></Input>
          </Form-item>
          <Form-item label="密码" prop="password">
            <Input v-model="registerFormValidate.password" :icon="passwordVisible" placeholder="请输入密码"
                   :type="passwordInputType"
                   @on-click="changePasswordVisible"></Input>
          </Form-item>
          <Form-item label="邮箱" prop="mail">
            <Input v-model="registerFormValidate.mail" icon="email" placeholder="请输入邮箱"></Input>
          </Form-item>
          <Form-item label="城市" prop="city">
            <Select v-model="registerFormValidate.city" placeholder="请选择所在地">
              <Option value="beijing">北京市</Option>
              <Option value="shanghai">上海市</Option>
              <Option value="shenzhen">深圳市</Option>
            </Select>
          </Form-item>
          <Form-item label="性别" prop="gender">
            <Radio-group v-model="registerFormValidate.gender">
              <Radio label="male">男</Radio>
              <Radio label="female">女</Radio>
            </Radio-group>
          </Form-item>
          <Form-item>
            <Button type="primary" @click="handleSubmit('registerFormValidate')">注册</Button>
            <Button type="ghost" @click="handleReset('registerFormValidate')" style="margin-left: 10px">重置</Button>
          </Form-item>
        </Form>
      </Card>
  </div>
</template>

<script>
  import {mapActions, mapGetters} from 'vuex'
  export default {
    name: 'register',
    data () {
      return {
        turn: true,
        registerFormValidate: {
          name: '',
          password: '',
          mail: '',
          city: '',
          gender: 'male'
        },
        registerRuleValidate: {
          name: [
            {required: true, message: '姓名不能为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ],
          mail: [
            {required: true, message: '邮箱不能为空', trigger: 'blur'},
            {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
          ],
          city: [
            {required: true, message: '请选择城市', trigger: 'change'}
          ],
          gender: [
            {required: true, message: '请选择性别', trigger: 'change'}
          ]
        }
      }
    },
    computed: {
      ...mapGetters(['passwordVisible', 'passwordInputType'])
    },
    methods: {
      ...mapActions(['changePasswordVisible']),
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('提交成功!')
          } else {
            this.$Message.error('表单验证失败!')
          }
        })
      },
      handleReset (name) {
        this.$refs[name].resetFields()
      },
      loginForm () {
        this.$emit('changeForm', 'islogin')
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .ivu-card {
    width: 400px
    padding: 15px;
    margin: 50px auto;
  }

  .changeForm {
    float: right
    padding-right: 2px;
    display: inline-block;
    width: auto
    cursor: pointer
  }

  .login-form {
    display: inline-block;
    width: auto
  }

  .login {
    margin: 0 auto;
  }

  .changeForm:hover {
    color: #19be6b
    transition: All 0.2s ease-in-out;
    transform: scale(1.2)
    i {
      transition: All 0.5s ease-in-out;
      transform: scale(1.2) rotate(360deg)
    }
  }
</style>
